﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
    .outer-container
    {
        margin:0 auto;
        width:1024px;
        border:1px solid #EAEAEA;
        background-color:#ECECEC;
        padding:5px;
        min-height:510px;
    }
    .inner-container
    {
        margin:0 auto;
        width:1018px;
        border:1px solid #EAEAEA;
        background-color:#FFF;
         min-height:505px;
        
    }
    h1
    {
        width:300px;height:30px;border-bottom:2px solid #ccc;margin:0 auto;text-align:center;padding-top:10px;font-size:20px;color:#083472;font-weight:bold;
    }
    .textbox
    {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    color: Gray;
    float: left;
    font: 14px Verdana,Arial,Helvetica,sans-serif;
    height: 26px;
    margin: 0;
    outline: medium none;
    padding-bottom: 0;
    padding-left: 0;
    padding-top: 8px;
    width: 325px;
    }
    .box
    {
        width:988px;border-bottom:1px dotted #ccc;min-height:40px;padding:10px 0px 10px  30px;
    }
    .lable
    {
        width:150px;font-size:16px;font-weight:bold;color:#083472;float:left;
    }
    .textbox-span
    {
   background-color: #EFF6FF;
    border: 1px solid #CCCCCC;
    float: left;
    font: 14px Verdana,Arial,Helvetica,sans-serif;
    height: 38px;
    margin: 0;
    padding-bottom: 0;
    padding-left: 3px;
    padding-top: 0;
    width: 325px;
    }
    .space
    {
        clear:both;
        width:100%;
        height:10px;
    }
    .button
    {
     background: none repeat scroll 0 0 #083472;
    border: medium none;
    border-radius: 3px 3px 3px 3px;
    color: white;
    cursor: pointer;
    float: right;
    font-size: 12px;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    width: 120px;
    margin:5px 25px 0px 0px;
    }

    </style>
    <link href="styles/jquery-ui.css" rel="stylesheet" type="text/css" />
    
</head>
<body>
    <form id="form1" runat="server">
    <div class="outer-container">
    <div class="inner-container">
    <h1> STUDENT INFOTMATION </h1>

<div class="space"></div>    
<div class="box">
<span class="lable"> Student Name : </span>
<span class="textbox-span">
<input type="text"  id="txtName" class="textbox"  />
</span>
</div>

<div class="box">
<span class="lable"> Student DOB : </span>
<span class="textbox-span">
<input type="text" id="txtDOB" class="textbox"  readonly="readonly"/>
</span>
</div>


<table id="certificates" style="width:100%;"> 
<tr>
<td>
<div class="box">
<span class="lable"> Certificate Name : </span>
<span class="textbox-span">
<input type="text"  class="textbox" />
</span>


<span class="lable" style="margin-left:10px;"> Certificate Date : </span>
<span class="textbox-span">
<input type="text" id="C1"  class="textbox" />
</span>
</div>
</td>
</tr>
<tr id="addBefore">
<td><span style=" color: #083472;float: right;font-size: 16px;font-weight: bold;margin-right: 10px;cursor:pointer;" onclick="addRow();"> Add more</span></td>
</tr>
</table>


<div class="box">
    <input type="button" id="Button1" onclick="return save();" value="Save" class="button" />
</div>



    </div>
    </div>
    </form>
    <script src="js/jquery-1.8.2.js" type="text/javascript"></script>
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    
    
    <script type="text/javascript">
        $(document).ready(function () {
            $('input[id$="txtDOB"]').datepicker({ changeMonth: true,
                changeYear: true,

                maxDate: new Date()
            });
            $('input[id$="C1"]').datepicker({
                changeMonth: true,
                changeYear: true,
                maxDate: new Date()
            });
        });


        function save() {
            var name = $("#txtName").val();
            var Dob = $("#txtDOB").val();
            if ($.trim(name) == "") {
                alert("Enter Name");
                return false;
            }
            else if ($.trim(Dob) == "") {
                alert("Enter Dob");
                return false;
            }
            else {

                var len = $("#certificates").children().children().length;
                var certificate = "";
                for (var i = 0; i < len - 1; i++) {

                    var c_n = $($($("#certificates").children().children()[i]).children().children().children()[1]).children().val();
                    var c_d = $($($("#certificates").children().children()[i]).children().children().children()[3]).children().val();
                    if ($.trim(c_n) != "" && $.trim(c_d) != "") {
                        certificate += $.trim(c_n) + "**" + $.trim(c_d) + "^^";
                    }

                }

                if (certificate == "") {
                    alert("Enter Minimum 1 Certificate");
                    return false;
                }
                else {
                    $.ajax({
                        type: "Post",
                        contentType: "application/json;charset=utf-8",
                        dataType: "json",
                        url: "Default.aspx/saveFunction",
                        data: "{'name':'" + name + "','Dob':'" + Dob + "','certificate':'" + certificate + "'}",
                        success: onSuccess,
                        error: onError
                    });
                }

            }
        }


        function onSuccess(data) {
            alert("Insert Successfully");
        }

        function onError(onError) {
            alert("Not Saved");
        }

        function addRow() {
            var len = $("#certificates").children().children().length;
            var c_n = $($($("#certificates").children().children()[len - 2]).children().children().children()[1]).children().val();
            var c_d = $($($("#certificates").children().children()[len - 2]).children().children().children()[3]).children().val();
            if ($.trim(c_n) == "") {
                alert("Certificate Name");
                return;
            } else if ($.trim(c_d) == "") {
                alert("Certificate Title");
                return;
            }
            else {
                var html = "";
                html += ' <tr> ';
                html += ' <td> ';
                html += ' <div class="box"> ';
                html += ' <span class="lable"> Certificate Name : </span>';
                html += ' <span class="textbox-span">';
                html += ' <input type="text"  class="textbox" />';
                html += ' </span>';
                html += ' <span class="lable" style="margin-left:10px;"> Certificate Date : </span>';
                html += ' <span class="textbox-span">';
                html += ' <input type="text"  class="textbox Other" />';
                html += ' </span>';
                html += ' </div>';
                html += ' </td>';
                html += ' </tr>';

                $(html).insertBefore("#addBefore");

                $(".Other").datepicker({
                    changeMonth: true,
                    changeYear: true,
                    maxDate: new Date()
                });


            }
        }

    </script>
</body>
</html>
